<template>
  <div class="communication" v-loading="loading">
    <div :style="{ width: width }">
      <el-table :data="tableData" border width="100%" :height="height">
        <el-table-column label="" fixed align="center" width="220">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.label }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align"
          width="150"
        >
          <template #default="scope">
            <el-input
              v-if="scope.row['table' + item.ids + 'Selected']"
              v-model="scope.row['table' + item.ids]"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row["table" + item.ids] }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px">
      测量点数量<el-input-number
        v-model="num"
        class="mx-4"
        :min="1"
        :max="16"
        size="small"
        controls-position="right"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useWinSize } from "@/utils/comm.js";
import {
  terminalSelectByPos,
  measuringPointParameterRemove,
  measuringPointParameterUpdate,
  measuringPointParameterSave,
} from "@/api/source.js";
const props = defineProps({
  fromType: String,
  position: String,
  randomNumber: Number,
  loading: Boolean,
  currentTypes: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: "",
  },
  // width: {
  //   type: String,
  //   default: "900px",
  // },
});

const emit = defineEmits(["changeData"]);
const num = ref(7);
const tableData = ref([
  {
    prop: "serialNumber",
    label: "电能表/交流采样装置序号",
    table1: "1",
    table2: "2",
    table3: "3",
    table4: "4",
    table5: "5",
    table6: "6",
    table7: "7",
    table8: "8",
    table9: "9",
    table10: "10",
    table11: "11",
    table12: "12",
    table13: "13",
    table14: "14",
    table15: "15",
    table16: "16",
    state1: 0,
    id: 1,
  },
  {
    prop: "testPointNumber",
    label: "所属测量点号",
    value: "2",
    table1: "1",
    table2: "2",
    table3: "3",
    table4: "4",
    table5: "5",
    table6: "6",
    table7: "7",
    table8: "1",
    table9: "2",
    table10: "3",
    table11: "4",
    table12: "5",
    table13: "6",
    table14: "7",
    table15: "6",
    table16: "7",
    state2: 0,
    id: 2,
  },
  {
    prop: "requestPort",
    label: "通信端口号",
    table1: "1",
    table2: "2",
    table3: "3",
    table4: "4",
    table5: "5",
    table6: "6",
    table7: "7",
    table8: "1",
    table9: "2",
    table10: "3",
    table11: "4",
    table12: "5",
    table13: "6",
    table14: "7",
    table15: "6",
    table16: "7",
    state3: 0,
    id: 3,
  },
  {
    prop: "requestBaudRate",
    label: "通信波特率",
    table1: "1",
    table2: "2",
    table3: "3",
    table4: "4",
    table5: "5",
    table6: "6",
    table7: "7",
    table8: "1",
    table9: "2",
    table10: "3",
    table11: "4",
    table12: "5",
    table13: "6",
    table14: "7",
    table15: "6",
    table16: "7",
    state4: 0,
    id: 4,
  },
  {
    prop: "communicationProtocolType",
    label: "通信规约类型",
    table1: "01",
    table2: "02",
    table3: "03",
    table4: "04",
    table5: "05",
    table6: "06",
    table7: "07",
    table8: "08",
    table9: "09",
    table10: "010",
    table11: "011",
    table12: "012",
    table13: "013",
    table14: "014",
    table15: "015",
    table16: "016",
    state5: 0,
    id: 5,
  },
  {
    prop: "requestAddress",
    label: "通信地址",
    table1: "AAAAAAAAAAAA",
    table2: "AAAAAAAAAAAA",
    table3: "AAAAAAAAAAAA",
    table4: "AAAAAAAAAAAA",
    table5: "AAAAAAAAAAAA",
    table6: "AAAAAAAAAAAA",
    table7: "AAAAAAAAAAAA",
    table8: "AAAAAAAAAAAA",
    table9: "AAAAAAAAAAAA",
    table10: "AAAAAAAAAAAA",
    table11: "AAAAAAAAAAAA",
    table12: "AAAAAAAAAAAA",
    table13: "AAAAAAAAAAAA",
    table14: "AAAAAAAAAAAA",
    table15: "AAAAAAAAAAAA",
    table16: "AAAAAAAAAAAA",
    state6: 0,
    id: 6,
  },
  {
    prop: "collectorRequestAddress",
    label: "所属采集器通信地址",
    table1: "000000000000",
    table2: "000000000000",
    table3: "000000000000",
    table4: "000000000000",
    table5: "000000000000",
    table6: "000000000000",
    table7: "000000000000",
    table8: "000000000000",
    table9: "000000000000",
    table10: "000000000000",
    table11: "000000000000",
    table12: "000000000000",
    table13: "000000000000",
    table14: "000000000000",
    table15: "000000000000",
    table16: "000000000000",
    state7: 0,
    id: 7,
  },
]);
const tableHeader = ref([
  {
    id: 1,
    ids: 1,
    type: "",
    prop: "table1",
    label: "表1",
    align: "center",
    width: "",
  },
  {
    id: 2,
    ids: 2,
    type: "",
    prop: "table2",
    label: "表2",
    align: "center",
    width: "",
  },
  {
    id: 3,
    ids: 3,
    type: "",
    prop: "table3",
    label: "表3",
    align: "center",
    width: "",
  },
  {
    id: 4,
    ids: 4,
    type: "",
    prop: "table4",
    label: "表4",
    align: "center",
    width: "",
  },
  {
    id: 5,
    ids: 5,
    type: "",
    prop: "table5",
    label: "表5",
    align: "center",
    width: "",
  },
  {
    id: 6,
    ids: 6,
    type: "",
    prop: "table6",
    label: "表6",
    align: "center",
    width: "",
  },
  {
    id: 7,
    ids: 7,
    type: "",
    prop: "table7",
    label: "表7",
    align: "center",
    width: "",
  },
]);
const terId = ref();
const width = ref();
const height = ref();
onMounted(() => {
  watch(
    props,
    (newValue, oldValue) => {
      if (newValue.type === "1") {
        num.value = 7;
        tableHeader.value = [
          {
            id: 1,
            ids: 1,
            type: "",
            prop: "table1",
            label: "表1",
            align: "center",
            width: "",
          },
          {
            id: 2,
            ids: 2,
            type: "",
            prop: "table2",
            label: "表2",
            align: "center",
            width: "",
          },
          {
            id: 3,
            ids: 3,
            type: "",
            prop: "table3",
            label: "表3",
            align: "center",
            width: "",
          },
          {
            id: 4,
            ids: 4,
            type: "",
            prop: "table4",
            label: "表4",
            align: "center",
            width: "",
          },
          {
            id: 5,
            ids: 5,
            type: "",
            prop: "table5",
            label: "表5",
            align: "center",
            width: "",
          },
          {
            id: 6,
            ids: 6,
            type: "",
            prop: "table6",
            label: "表6",
            align: "center",
            width: "",
          },
          {
            id: 7,
            ids: 7,
            type: "",
            prop: "table7",
            label: "表7",
            align: "center",
            width: "",
          },
        ];
      } else if (newValue.type === "2") {
        terminalSelectByPosApi();
      } else {
        if (newValue.currentTypes === 2 || newValue.currentTypes === 6) {
          terminalSelectByPosApi();
        }
      }
      // console.log("termi", newValue);
      emit("changeData", tableHeader.value, tableData.value, terId.value);
    },
    { immediate: true },
    { deep: true }
  );
  //判断屏幕尺寸
  const size = useWinSize();
  if (size.width > 1440) {
    if (props.type == "1" || props.type == "2") {
      width.value = "900px";
      height.value = 295;
    } else {
      width.value = "1400px";
      height.value = 295;
    }
  } else {
    if (props.type == "1" || props.type == "2") {
      width.value = "700px";
      height.value = 280;
    } else {
      width.value = "700px";
      height.value = 200;
    }
  }
});
//通讯参数查询
const terminalSelectByPosApi = async () => {
  let parm = {
    pos: props.position,
  };
  if (props.fromType === "setting") {
    parm.spare1 = 2;
  }
  if (props.position) {
    await terminalSelectByPos(parm)
      .then((res) => {
        if (res.data && res.data.cldList != undefined) {
          num.value = res.data.cldList.length;
          tableHeader.value = res.data.cldList;
          terId.value = res.data.terId;
          let i = 1;
          tableHeader.value.forEach((item, index) => {
            item.label = "表" + i;
            item.prop = "table" + i;
            item.align = "center";
            item.ids = i;
            //内容赋值
            getDataList(i, item);
            i++;
          });
        }
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
const getDataList = (i, obj) => {
  tableData.value[0]["table" + i] = obj.serialNumber;
  tableData.value[1]["table" + i] = obj.testPointNumber;
  tableData.value[2]["table" + i] = obj.requestPort;
  tableData.value[3]["table" + i] = obj.requestBaudRate;
  tableData.value[4]["table" + i] = obj.communicationProtocolType;
  tableData.value[5]["table" + i] = obj.requestAddress;
  tableData.value[6]["table" + i] = obj.collectorRequestAddress;
};
const handleChange = (value) => {
  if (value >= 1) {
    let tempData = JSON.parse(JSON.stringify(tableHeader.value));
    tableHeader.value = [];
    let i1 = 0;
    for (let i = 1; i <= value; i++) {
      let obj = {};
      if (i1 === tempData.length) {
        obj = {
          collectorRequestAddress: "000000000000",
          communicationProtocolType: "2",
          requestAddress: "AAAAAAAAAAAA",
          requestBaudRate: 4,
          requestPort: "1",
          serialNumber: i,
          terId: 0,
          testPointNumber: 1,
          prop: "table" + value,
          label: "表" + value,
          align: "center",
          ids: value,
        };
      } else {
        obj = {
          ids: i,
          type: "",
          prop: "table" + i,
          label: "表" + i,
          align: "center",
          width: "",
          id: tempData[i1].id,
          collectorRequestAddress:
            tempData[i1].collectorRequestAddress === undefined
              ? "000000000000"
              : tempData[i1].collectorRequestAddress,
          communicationProtocolType:
            tempData[i1].communicationProtocolType === undefined
              ? 2
              : tempData[i1].communicationProtocolType,
          requestAddress:
            tempData[i1].requestAddress === undefined
              ? "AAAAAAAAAAAA"
              : tempData[i1].requestAddress,
          requestBaudRate:
            tempData[i1].requestBaudRate === undefined
              ? 4
              : tempData[i1].requestBaudRate,
          requestPort:
            tempData[i1].requestPort === undefined
              ? "1"
              : tempData[i1].requestPort,
          serialNumber:
            tempData[i1].serialNumber === undefined
              ? i
              : tempData[i1].serialNumber,
          terId: tempData[i1].terId,
          testPointNumber:
            tempData[i1].testPointNumber === undefined
              ? 1
              : tempData[i1].testPointNumber,
        };
      }

      // console.log("tempData2", obj, tableHeader.value);
      i1++;
      tableHeader.value.push(obj);
    }
    //数据重新赋值 start
    let i2 = 1;
    tableHeader.value.forEach((item, index) => {
      item.label = "表" + i2;
      item.prop = "table" + i2;
      item.align = "center";
      item.ids = i2;
      //内容赋值
      getDataList(i2, item);
      i2++;
    });
    //数据重新赋值 end
    // console.log(
    //   "changeData123",
    //   tableHeader.value,
    //   tableData.value,
    //   terId.value
    // );
    emit("changeData", tableHeader.value, tableData.value, terId.value);
  }
};
//新增测量点
const measuringPointParameterSaveApi = async (parm) => {
  await measuringPointParameterSave(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
//修改测量点
const measuringPointParameterUpdateApi = async (parm) => {
  await measuringPointParameterUpdate(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
//测量点删除
const measuringPointParameterRemoveApi = async (parm) => {
  await measuringPointParameterRemove(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
const cellClick = (row, column) => {
  switch (column.property) {
    case "table1":
      row.table1Selected = !row.table1Selected;
      break;
    case "table2":
      row.table2Selected = !row.table2Selected;
      break;
    case "table3":
      row.table3Selected = !row.table3Selected;
      break;
    case "table4":
      row.table4Selected = !row.table4Selected;
      break;
    case "table5":
      row.table5Selected = !row.table5Selected;
      break;
    case "table6":
      row.table6Selected = !row.table6Selected;
      break;
    case "table7":
      row.table7Selected = !row.table7Selected;
      break;
    case "table8":
      row.table8Selected = !row.table8Selected;
      break;
    case "table9":
      row.table9Selected = !row.table9Selected;
      break;
    case "table10":
      row.table10Selected = !row.table10Selected;
      row.table10 = row.value;
      break;
    case "table11":
      row.table11Selected = !row.table11Selected;
      break;
    case "table12":
      row.table12Selected = !row.table12Selected;
      break;
    case "table13":
      row.table13Selected = !row.table13Selected;
      break;
    case "table14":
      row.table14Selected = !row.table14Selected;
      break;
    case "table15":
      row.table15Selected = !row.table15Selected;
      break;
    case "table16":
      row.table16Selected = !row.table16Selected;
      break;
    default:
      break;
  }
};
const focusEvent = (row, index, column) => {
  switch (column.property) {
    case "table1":
      row.oldTable1 = row.table1;
      break;
    case "table2":
      row.oldTable2 = row.table2;
      break;
    case "table3":
      row.oldTable3 = row.table3;
      break;
    case "table4":
      row.oldTable4 = row.table4;
      break;
    case "table5":
      row.oldTable5 = row.table5;
      break;
    case "table6":
      row.oldTable6 = row.table6;
      break;
    case "table7":
      row.oldTable7 = row.table7;
      break;
    case "table8":
      row.oldTable8 = row.table8;
      break;
    case "table9":
      row.oldTable9 = row.table9;
      break;
    case "table10":
      row.oldTable10 = row.table10;
      break;
    case "table11":
      row.oldTable11 = row.table11;
      break;
    case "table12":
      row.oldTable12 = row.table12;
      break;
    case "table13":
      row.oldTable13 = row.table13;
      break;
    case "table14":
      row.oldTable14 = row.table14;
      break;
    case "table15":
      row.oldTable15 = row.table15;
      break;
    case "table16":
      row.oldTable16 = row.table16;
      break;
    default:
      break;
  }
};
const blurEvent = (row, index, column) => {
  tableHeader.value[column["no"] - 1][row.prop] = row["table" + column["no"]];
  switch (column.property) {
    case "table1":
      row.table1Selected = !row.table1Selected;
      if (row.oldTable1 !== row.table1) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table2":
      row.table2Selected = !row.table2Selected;
      if (row.oldTable2 !== row.table2) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table3":
      row.table3Selected = !row.table3Selected;
      if (row.oldTable3 !== row.table3) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table4":
      row.table4Selected = !row.table4Selected;
      if (row.oldTable4 !== row.table4) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table5":
      row.table5Selected = !row.table5Selected;
      if (row.oldTable5 !== row.table5) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table6":
      row.table6Selected = !row.table6Selected;
      if (row.oldTable6 !== row.table6) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table7":
      row.table7Selected = !row.table7Selected;
      if (row.oldTable7 !== row.table7) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table8":
      row.table8Selected = !row.table8Selected;
      if (row.oldTable8 !== row.table8) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table9":
      row.table9Selected = !row.table9Selected;
      if (row.oldTable9 !== row.table9) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table10":
      row.table10Selected = !row.table10Selected;
      if (row.oldTable10 !== row.table10) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table11":
      row.table11Selected = !row.table11Selected;
      if (row.oldTable11 !== row.table11) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table12":
      row.table12Selected = !row.table12Selected;
      if (row.oldTable12 !== row.table12) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table13":
      row.table13Selected = !row.table13Selected;
      if (row.oldTable13 !== row.table13) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table14":
      row.table14Selected = !row.table14Selected;
      if (row.oldTable14 !== row.table14) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table15":
      row.table15Selected = !row.table15Selected;
      if (row.oldTable15 !== row.table15) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    case "table16":
      row.table16Selected = !row.table16Selected;
      if (row.oldTable16 !== row.table16) {
        emit("changeData", tableHeader.value, tableData.value, terId.value);
      }
      break;
    default:
      break;
  }
};
defineExpose({
  terminalSelectByPosApi,
});
</script>

<style lang="scss" scoped>
//参数设置
</style>
